-
Notifications
You must be signed in to change notification settings - Fork 21
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add CanvasContext #4439
base: master
Are you sure you want to change the base?
feat: add CanvasContext #4439
Conversation
dd86921
to
7b5fe70
Compare
() => ({ | ||
sidePanelOpen, | ||
updateSidePanelOpen, | ||
sidePanelWidth: width, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sidePanelWidth: width, | |
sidePanelWidth: sidePanelOpen ? width : 0, |
@@ -1,5 +1,5 @@ | |||
import { useMemo, useState } from "react"; | |||
import { cx } from "@emotion/css"; | |||
import HvCanvasProvider from "packages/pentaho/src/Canvas/CanvasContext/CanvasContext"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👀
needs to be exported
Can we hoist CanvasContext.tsx
up a directory too? We won't have other files there, and its how we organize other contexts
const HvCanvasProvider = ({ children }: { children: React.ReactNode }) => { | ||
const [sidePanelOpen, setSidePanelOpen] = useState(false); | ||
const [width, setWidth] = useState(0); | ||
const [lastOpenWidth, setLastOpenWidth] = useState(0); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is derived state, right? We can compute the actual width with the existing sidePanelOpen
and width
eg
const actualWidth = sidePanelOpen ? width : 0
@@ -19,6 +19,7 @@ interface ResizableProps { | |||
initialWidth?: number; | |||
minWidth?: number; | |||
maxWidth?: number; | |||
updateSidePanelWidth?: (width: number) => void; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
event handlers should be named as such on*
. eg
updateSidePanelWidth?: (width: number) => void; | |
onResize?: (width: number) => void; |
ref={ref} | ||
className={cx(classes.root, className)} | ||
style={{ | ||
width: sidePanelOpen |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we could do this with CSS vars
width: sidePanelOpen | |
"--sizePanelWidth": open ? sidePanelWidth : 0, |
7b5fe70
to
fa6c1dc
Compare
fa6c1dc
to
4a97967
Compare
Adds a
HvCanvasContext
. Canvas components (SidePanel
,BottomPanel
andCanvasToolbar
) use this context to resize automatically when the side panel is resized. If no CanvasContext is used then the components won't resize automatically and it's up to the user to do that if that's needed.